﻿@{
    ViewBag.Title = "Index";
}
<style>
    label {
        display: inline-block;
        width: 150px;
        text-align: left;
        margin-bottom: 15px;
    }
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<h2>Login</h2>

<p id="error">@Model</p>

<form id="formLogin" action="@Url.Action("Logginator", "Home")" method="get">
    <label>
        <span>Usuario:</span>
        <input id="user" type="text" name="user" />
        <br />
        <span>Contraseña:</span>
        <input id="pass" type="password" name="pass" />
    </label><br />
    <input type="submit" value="Ingresar" />
</form>

<script type="text/javascript">
    var formulario = $("#formLogin")
    formulario.submit(login);

    function login() {
        var url = "@Url.Action("Logginator", "Home")";

        var datos = {}
        datos.user = $("#user").val();
        datos.pass = $("#pass").val();

        var promesa = $.get(url, datos);
        promesa.done(mostrarResultado);

        // La funcion debe retornar false, para que no se envie el formulario
        return false;
    }

    function mostrarResultado(datosDelServidor) {
        $("#error").text(datosDelServidor);
    }

</script>